<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand">面试结果</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center" style="height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div style="float: left;width: 50%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
                <h5>搜索 : </h5>
              </el-col>
              <el-col :span="20" class="interviewtrack">
                
                <el-select v-model="name" @change="selectname">
                  <el-option v-for="item in list" :key="item.name" :label="item.name"
                             :value="item.name"></el-option>
                </el-select>
              
              </el-col>
            </el-row>
          
          
          </div>
          <div class="interviewtrack1 right1" style="float: right;">
            <el-input
              v-model.trim="searchword"
              size="small"
              placeholder="请输入内容"
              @keyup.enter.native="search"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;"  @click="search"></i>
            </el-input>
            <el-button class="edit"
            v-if="jiaofu"
                       size="small" round @click="edit">修改
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23" class="posttable2">
          <el-table
            class="resumetable"
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <el-table-column
              prop="name"
              label="姓名"
            >
            
            </el-table-column>
            <el-table-column
              v-if="ifname"
              prop="customerName"
              label="推送客户"
            >
            </el-table-column>
            <el-table-column
              prop="postName"
              label="推送职位">
            </el-table-column>
            <el-table-column
              prop="postLevel"
              label="职位级别">
            </el-table-column>
            <el-table-column
              prop="pusher"
              label="推送人">
            </el-table-column>
            <el-table-column
              prop="type"
              label="面试次数"
            >
            </el-table-column>
            <el-table-column
              prop="candidateTime"
              label="面试时间"
            >
            </el-table-column>
            <el-table-column
              prop="result"
              label="面试结果"
            >
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope">
                <span @click="detailShow(scope)" style="color: #119aff;cursor: pointer;">查看详情</span>
              </template>
            </el-table-column>
          </el-table>
          
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <el-dialog
      title="查看详情"
      :visible.sync="detaildialogVisible"
      width="570px"
      :before-close="detailClose"
      class="addroledialog resultdetail"
    >
      <div style="text-align: left;width: 524px;margin-top: 40px;">
        <el-row>
          <el-col style="margin-bottom: 5px;" v-for="(item,index) in situation" :key="index">
            <el-col style="width: 21%;margin-top: -2px;color: #343434;font-weight: 700;">
              <div style="float: right;margin-bottom: 10px;">{{item.type}}情况</div>
              <div style="float: right;">{{item.dateTime}}</div>
            </el-col>
            <el-col style="width: 6%;">
              <el-row type="flex" justify="center">
                <el-col style="width: 14px;">
                  <div
                    style="width: 12px;height: 12px;border-radius: 50%;border: 1px solid #1864c7;margin-bottom: 5px;">
                    <div
                      style="width: 6px;height: 6px;border-radius: 50%;background-color: #1864c7;margin: 0 auto;margin-top: 3px;"></div>
                  </div>
                  <div style="width: 1px;height: 80px;background-color: #1865c6;margin: 0 auto;"></div>
                </el-col>
              </el-row>
            </el-col>
            <el-col style="width: 73%;margin-top: -10px;">
              <div style="width: 379px;border-radius: 5px;background-color:#f4f4f4;margin-left: 10px;">
                <div class="arrow"></div>
                <div style="width: 337px;min-height: 85px;margin: 0 auto;padding-top: 8px;">
                  <el-col>
                    <span style="color: #333;font-weight: 700;">面试结果 : </span><span style="color:#fb8284;">{{item.result}}</span>
                  </el-col>
                  <el-col style="margin-bottom: 10px;">
                    <span style="color: #333;font-weight: 700;">面试反馈 : </span><span style="color:#9b9b9b;">{{item.backInfo}}</span>
                  </el-col>
                </div>
              </div>
            </el-col>
          </el-col>
          <el-col style="margin-bottom: 20px;">
            <el-col style="width: 21%;margin-top: -2px;font-weight: 700;">
              <div style="float: right;color: #1e66c5;">结束</div>
            </el-col>
            <el-col style="width: 6%;">
              <el-row type="flex" justify="center">
                <el-col style="width: 14px;">
                  <div
                    style="width: 12px;height: 12px;border-radius: 50%;border: 1px solid #1864c7;margin-bottom: 5px;">
                    <div
                      style="width: 6px;height: 6px;border-radius: 50%;background-color: #1864c7;margin: 0 auto;margin-top: 3px;"></div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-col>
        
        </el-row>
      </div>
    </el-dialog>
    
    
    <el-dialog
      title="修改"
      :visible.sync="editdialogVisible"
      width="415px"
      :before-close="editnumClose"
      class="addroledialog"
    >
      <div style="text-align: left">
        
        <el-form label-position="top" ref="editform" :rules="rules" :model="form" style="padding:0px 50px;">
          <el-form-item
            prop="result"
          >
            <el-col>
              <span style="color:#333;"><span style='color:#F56C6C;'>*</span> {{formtitle}}结果</span>
            </el-col>
            <el-col>
              <el-select v-model.trim="form.result" style="width: 100%;">
                <el-option v-for="item in resultlist" :label="item.value" :key="item.value"
                           :value="item.value"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item
            prop="feedback"
          >
            <el-col>
              <span style="color:#333;">{{formtitle}}反馈</span>
              <el-input type="textarea" :rows="5" resize="none" v-model.trim="form.feedback"></el-input>
            </el-col>
          
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round :disabled="editdis" @click="submitForm('editform')">确 定</el-button>
    <el-button round @click="editnumClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  
  
    <!--    修改放弃面试的候选人信息的错误提示-->
    <el-dialog
      title="错误"
      :visible.sync="giveUpdialogVisible"
      width="415px"
      :before-close="giveUphandleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">不得修改已放弃面试的候选人的信息!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="giveUphandleClose">确 定</el-button>
        <el-button round @click="giveUphandleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何候选人</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="handleClose">确 定</el-button>
    <el-button round @click="handleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import tagsView from '../../store/modules/tagsView'
  export default {
    name: "interviewresult",
    data() {
      return {
        tableData: [],
        interviewnum: '',
        currentPage: 1,
        pagesize: 15,
        currentRow: null,
        totalcount: null,
        jiaofu:true,
        searchword : '',
        detaildialogVisible: false,
        editdialogVisible: false,
        errordialogVisible: false,
        giveUpdialogVisible : false,
        list: [],
        name: '',
        ifname : true,
        resultlist: [],
        situation : [],
        formtitle: '',
        form: {
          result: '',
          feedback: ''
        },
        rules: {
          'result': [
            {required: true, message: '请选择面试结果', trigger: 'change'}
          ]
        },
        editdis :false
      }
    },
    created() {
      if(tagsView.state.identity == 7){
        this.jiaofu = false;
      }
      axios.post(this.url + '/demand/getCustomerNames').then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.list = res.data.data;
        }
      });
      axios.post(this.url + '/interview/result', {
        customerName: this.name,
        condition : this.searchword,
        pageNum: this.currentPage,
        pageSize: this.pagesize
      }).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
        }
      })
    },
    methods: {
      search(){
        this.currentPage = 1;
        this.selectname();
      },
      selectname() {
        axios.post(this.url + '/interview/result', {
          customerName: this.name,
          condition : this.searchword,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if(this.name !== ''){
              this.ifname = false;
            }else{
              this.ifname = true;
            }
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //改变表格的页面展示数量
      handleSizeChange(val) {
        this.pagesize = val;
        this.selectname();
      },
      //修改当前表格页数
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.selectname();
      },
      //点击表格行，获取当前行的数据
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      edit() {
        var row = '';
        this.form.result = '';
        this.form.feedback = '';
        if (this.currentRow == null) {
          document.documentElement.style.overflow = 'hidden';
          this.errordialogVisible = !this.errordialogVisible;
        } else {
          this.editdis = false;
          this.editdialogVisible = true;
          document.documentElement.style.overflow = 'hidden';
          row = JSON.parse(JSON.stringify(this.currentRow))
          this.formtitle = row.type;
          axios.post(this.url + '/interview/gettotal',{
            processId : this.currentRow.processId
          }).then(res => {
            this.unlogin(res.data.code);
            if(res.data.code == 200){
              if(this.currentRow.type == '一面' && res.data.data == 1){
                this.resultlist = [
                  {
                    value: '通过'
                  }, {
                    value: '不通过'
                  }, {
                    value: '未去面试'
                  },{
                    value: '待定'
                  },{
                    value: '通过不去'
                  }
                ]
              }else if(this.currentRow.type == '一面' && res.data.data !== 1){
                this.resultlist = [
                  {
                    value: '通过'
                  }, {
                    value: '不通过'
                  }, {
                    value: '未去面试'
                  }
                ]
              };
              if(this.currentRow.type == '二面' && res.data.data == 2){
                this.resultlist = [
                  {
                    value: '通过'
                  }, {
                    value: '不通过'
                  }, {
                    value: '未去面试'
                  },{
                    value: '待定'
                  },{
                    value: '通过不去'
                  }
                ]
              }else if(this.currentRow.type == '二面' && res.data.data !== 2){
                this.resultlist = [
                  {
                    value: '通过'
                  }, {
                    value: '不通过'
                  }, {
                    value: '未去面试'
                  }
                ]
              };
              if(this.currentRow.type == '三面' && res.data.data == 3){
                this.resultlist = [
                  {
                    value: '通过'
                  }, {
                    value: '不通过'
                  }, {
                    value: '未去面试'
                  },{
                    value: '待定'
                  },{
                    value: '通过不去'
                  }
                ]
              }else if(this.currentRow.type == '三面' && res.data.data !== 3){
                this.resultlist = [
                  {
                    value: '通过'
                  }, {
                    value: '不通过'
                  }, {
                    value: '未去面试'
                  }
                ]
              };
              
            }
          })
        }
      },
      //放弃面试错误提示框关闭
      giveUphandleClose() {
        this.giveUpdialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.editdis = true;
            axios.post(this.url + '/interview/update', {
              processId: this.currentRow.processId,
              type: this.currentRow.type,
              id: this.currentRow.id,
              backInfo: this.form.feedback,
              result: this.form.result
            }).then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                this.editdis = false;
                this.editdialogVisible = false;
                document.documentElement.style.overflow = 'auto';
                this.selectname();
                this.$refs.editform.resetFields();
              }
            })
          }
        })
      },
      handleClose() {
        this.editdis = false;
        this.errordialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      detailShow(row) {
        this.detaildialogVisible = true;
        document.documentElement.style.overflow = 'hidden';
        axios.post(this.url + '/interview/detail',{
          id : row.row.id
        }).then(res => {
          this.situation = res.data.data;
          for(var i = 0 ; i < this.situation.length;i++){
            if(i == 0){
              this.situation[i].type = '一面'
            }
            if(i == 1){
              this.situation[i].type = '二面'
            }
            if(i == 2){
              this.situation[i].type = '三面'
            }
          }
          
        })
      },
      detailClose() {
        this.detaildialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      editnumClose() {
        this.form.result = '';
        this.form.feedback = '';
        this.$refs.editform.resetFields();
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      }
    },
    watch: {
      'searchword': function (val) {
        if (val == '') {
          this.currentPage = 1;
          this.selectname()
        }
      }
    },
  }
</script>

<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  
  .edit {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .edit:focus {
    color: #fff !important;
  }
  
  .hand {
    color: #1099ff;
  }
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .arrow {
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-right: 10px solid;
    border-bottom: 10px solid transparent;
    position: absolute;
    margin-left: -10px;
    margin-top: 5px;
    border-right-color: #f4f4f4;
  }
</style>
